<template>
  <view class="menu" style="background-color: #18c7e1">
    <!-- 顶部圆 -->
    <view style="text-align: center">
      <image
        class="arrow"
        src="../../static/img/arrow-d.png"
        mode="aspectFit"
        @tap="hideMenu"
      ></image>
    </view>
    <view class="card-list flex">
      <view class="card" @click="medical">
        <image
          class="icon"
          src="../../static/img/card1.png"
          mode="aspectFit"
        ></image>
        <view style="font-size: 26upx; margin-top: 10upx">就诊记录</view>
        <view style="font-size: 20upx; margin-top: 20upx">查看更多</view>
      </view>
      <view class="card" @click="inquiry">
        <image
          class="icon"
          src="../../static/img/card2.png"
          mode="aspectFit"
        ></image>
        <view style="font-size: 26upx; margin-top: 10upx">健康调查</view>
        <view style="font-size: 20upx; margin-top: 20upx">查看更多</view>
      </view>
      <view
        class="card"
        @tap="myreportGravida"
        v-show="this.config.globalData.user.userType == 2 || infos == 1"
      >
        <image
          class="icon"
          src="../../static/img/card3.png"
          mode="aspectFit"
        ></image>
        <view style="font-size: 26upx; margin-top: 10upx">产检报告</view>
        <view style="font-size: 20upx; margin-top: 20upx">查看更多</view>
      </view>
      <view
        class="card"
        @tap="myreportOld"
        v-show="this.config.globalData.user.userType == 4"
      >
        <image
          class="icon"
          src="../../static/img/card3.png"
          mode="aspectFit"
        ></image>
        <view style="font-size: 26upx; margin-top: 10upx">体检报告</view>
        <view style="font-size: 20upx; margin-top: 20upx">查看更多</view>
      </view>
      <view class="card" @tap="special">
        <image
          class="icon"
          src="../../static/img/card4.png"
          mode="aspectFit"
        ></image>
        <view style="font-size: 26upx; margin-top: 10upx">专项测评</view>
        <view style="font-size: 20upx; margin-top: 20upx">查看更多</view>
      </view>
      <view
        class="card"
        @tap="goYyBag"
        v-show="this.config.globalData.user.userType == 1 && child == 0"
      >
        <image
          class="icon"
          src="../../static/img/yinyangbao.png"
          mode="aspectFit"
        ></image>
        <view style="font-size: 26upx; margin-top: 10upx; padding: 10rpx"
          >营养包领取记录</view
        >
      </view>
    </view>
    <!-- 底部三角 -->
    <view style="text-align: center">
      <image
        class="triangle"
        src="../../static/img/triangle.png"
        mode="aspectFit"
        style=""
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowBtn: "", //是否开启了健康包 0开启了 1未开启
    };
  },
  props: ["infos", "child"],
  onShow() {
    // console.log(this.config.globalData.user.userType)
    // this.getIdx()
  },
  methods: {
    hideMenu() {
      this.$emit("closeMenu", "hide");
    },
    // 就诊记录
    medical() {
      uni.navigateTo({
        url: "/pages/main/child/archives/medical-records",
      });
    },
    // 专项测评
    special() {
      uni.navigateTo({
        url: "/pages/main/child/archives/special-evaluation",
      });
    },
    // 孕妇产检报告
    myreportGravida() {
      uni.navigateTo({
        url: "/pages/main/child/archives/my-report",
      });
    },
    // 老年人体检报告
    myreportOld() {
      uni.navigateTo({
        url: "/pages/main/child/archives/my-report-old",
      });
    },
    // 健康调查
    inquiry() {
      uni.navigateTo({
        url: "/pages/main/child/archives/health-survey",
      });
    },
    //去营养包
    goYyBag() {
      uni.navigateTo({
        url: "../../pages/main/child/child_bagList",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  position: fixed;
  width: 500upx;
  height: 600upx;
  // background-color: #007AFF;
  left: 50%;
  bottom: 20px;
  margin: 0 0 0 -250upx;
  z-index: 3;
  border-radius: 30upx;
}

// 顶部圆
.arrow {
  width: 30upx;
  height: 30upx;
  background-color: #18c7e1;
  border-radius: 50upx;
  padding: 20upx;
  margin-top: -20upx;
}

// 底部三角
.triangle {
  width: 150upx;
  height: 150upx;
  margin-top: -50upx;
}

.card-list {
  flex-wrap: wrap;
  justify-content: space-around;

  .card {
    width: 160upx;
    height: 200upx;
    margin: 10upx 10upx 60upx;
    background-color: #fff;
    text-align: center;
    border-radius: 24upx;

    .icon {
      width: 50upx;
      height: 50upx;
      margin: 30upx 0 0;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .menu {
    background-color: #1b1c1e !important;
    box-shadow: 0px 2px 14px 0px #8df1ff;
  }

  .arrow {
    background-color: #38383c !important;
    box-shadow: 1px -1px 6px 1px #8df1ff;
  }

  .card {
    background-color: #38383c !important;
    color: #f8f8f8;
  }

  .triangle {
    margin-top: -10rpx !important;
  }
}
</style>
